<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>GeoBI demo</title>
  <link rel="stylesheet" type="text/css" href="js/mapfish/client/mfbase/ext/resources/css/ext-all.css"/>

  <style type="text/css">
    html, body {
      font: normal 12px verdana;
      margin: 0;
      padding: 0;
      border: 0 none;
      overflow: hidden;
      height: 100%;
      width: 100%;
    }

    ul.list {
      list-style-type: disc;
      font-size: 11px;
      padding: 0 0 0 16px;
    }
    
    #loading{
        position:absolute;
        width: 100%;
        height: 100%;
        z-index:20001;
    }
    #loading a {
        color:#225588;
    }
    #loading .loading-mask {
        padding:2px;
        width: 100%;
        height: 100%;
        -moz-opacity: 0.5;
        opacity: .50;
        filter: alpha(opacity=50);
        background-color: white;
    }
    #loading .loading-container {
        position:absolute;
        left:45%;
        top:40%;
        height:auto;
        border:1px solid #ccc;
    }
    #loading .loading-indicator {
        background:white;
        color:#444;
        font:bold 13px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        height:auto;
    }
    #loading-msg {
        font: normal 10px arial,tahoma,sans-serif;
    }
    .olControlOverviewMapElement {
      background-color: transparent !important;
      padding: 0 0 0 0  !important;
    }
     .float-left {
          float: left;
        }
        .clear-left {
          clear: left;
        }
        .zoomin {
          background-image:url(js/mapfish/client/mfbase/mapfish/img/icon_zoomin.png) !important;
          height:20px !important;
          width:20px !important;
        }
        .zoomout {
          background-image:url(js/mapfish/client/mfbase/mapfish/img/icon_zoomout.png) !important;
          height:20px !important;
          width:20px !important;
        }
        .zoomfull {
          background-image:url(js/mapfish/client/mfbase/mapfish/img/icon_zoomfull.png) !important;
          height:20px !important;
          width:20px !important;
        }
        .pan {
          background-image:url(js/mapfish/client/mfbase/mapfish/img/icon_pan.png) !important;
          height:20px !important;
          width:20px !important;
        }
        .drawpoint {
          background-image:url(js/mapfish/client/mfbase/mapfish/img/draw_point_off.png) !important;
          height:20px !important;
          width:20px !important;
        }
        .drawline {
          background-image:url(js/mapfish/client/mfbase/mapfish/img/draw_line_off.png) !important;
          height:20px !important;
          width:20px !important;
        }
        .drawpolygon {
          background-image:url(js/mapfish/client/mfbase/mapfish/img/draw_polygon_off.png) !important;
          height:20px !important;
          width:20px !important;
        }
        .next {
            background-image:url(js/mapfish/client/mfbase/mapfish/img/resultset_next.png) !important;
            height:20px !important;
            width:20px !important;
        }
        .back {
            background-image:url(js/mapfish/client/mfbase/mapfish/img/resultset_previous.png) !important;
            height:20px !important;
            width:20px !important;
        }
  </style>
  
  <!-- EXT colorField Extent -->
  <link rel="stylesheet" type="text/css" href="js/mapfish/client/mfbase/ext-community-extensions/color-field.css" />
  <link rel="stylesheet" href="js/mapfish/client/mfbase/openlayers/theme/default/framedCloud.css" type="text/css" />
    
</head>
<body>
<center><img src="js/georeport.png" alt="GeoReport"/></center>
  <div id="loading">
    <div class="loading-mask"></div>
    <div class="loading-container">
      <div class="loading-indicator"><img src="js/mapfish/client/mfbase/ext/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>GeoBI Platform - GeoReport Module<br /><span id="loading-msg">Loading ...</span></div>
    </div>
  </div>
  <div id="north" style="padding: 5px">
  
  </div>
  <div id="buttonbar"></div>
  <div id="olmap"></div>
  <div id="south">
    
  </div>
  <div id="position"><div id="mouseposition"></div>
  </div>        
</body>
 
<script language="javascript" src="js/pentaho-ajax.js"></script>
 

<script type="text/javascript" src="js/mapfish/client/mfbase/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/mapfish/client/mfbase/ext/ext-all.js"></script>

<script type="text/javascript" src="js/mapfish/client/mfbase/openlayers/lib/OpenLayers.js"></script>

<script type="text/javascript" src="js/mapfish/client/mfbase/mapfish/MapFish.js"></script>


<!-- EXT colorField Extent -->
<script type="text/javascript" src="js/mapfish/client/mfbase/ext-community-extensions/color-field.js" ></script>

<script type="text/javascript">
     
     map:null;
     viewport:null;

      var map, toolbar, vectorLayer, markers, propSymbolLayer, vmap0;
   
      function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }

       function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }    
      

// reference local blank image
  Ext.BLANK_IMAGE_URL = 'js/mapfish/client/mfbase/ext/resources/images/default/s.gif';
  //TOOLBAR
      
      function addSeparator(toolbar){
            toolbar.add(new Ext.Toolbar.Spacer());
            toolbar.add(new Ext.Toolbar.Separator());
            toolbar.add(new Ext.Toolbar.Spacer());
        } 

        function initToolbarContent() {
        
            toolbar.addControl(
                new OpenLayers.Control.ZoomToMaxExtent({
                    map: map,
                    title: 'Zoom to maximum map extent'
                }), {
                    iconCls: 'zoomfull', 
                    toggleGroup: 'map'
                }
            );
            
            addSeparator(toolbar);
        
            toolbar.addControl(
                new OpenLayers.Control.ZoomBox({
                    title: 'Zoom in: click in the map or use the left mouse button and drag to create a rectangle'
                }), {
                    iconCls: 'zoomin', 
                    toggleGroup: 'map'
                }
            );
        
            toolbar.addControl(
                new OpenLayers.Control.ZoomBox({
                    out: true,
                    title: 'Zoom out: click in the map or use the left mouse button and drag to create a rectangle'
                }), {
                    iconCls: 'zoomout', 
                    toggleGroup: 'map'
                }
            );
            
            toolbar.addControl(
                new OpenLayers.Control.DragPan({
                    isDefault: true,
                    title: 'Pan map: keep the left mouse button pressed and drag the map'
                }), {
                    iconCls: 'pan', 
                    toggleGroup: 'map'
                }
            );
            
            addSeparator(toolbar);
            
            toolbar.addControl(
                new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Point, {
                    title: 'Draw a point on the map'
                }), {
                    iconCls: 'drawpoint', 
                    toggleGroup: 'map'
                }
            );
            
            toolbar.addControl(
                new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Path, {
                    title: 'Draw a linestring on the map'
                }), {
                    iconCls: 'drawline', 
                    toggleGroup: 'map'
                }
            );
            
            toolbar.addControl(
                new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Polygon, {
                    title: 'Draw a polygon on the map'
                }), {
                    iconCls: 'drawpolygon', 
                    toggleGroup: 'map'
                }
            );
            
            addSeparator(toolbar);
        
            var nav = new OpenLayers.Control.NavigationHistory();
            map.addControl(nav);
            nav.activate();
            
            toolbar.add(
                new Ext.Toolbar.Button({
                    iconCls: 'back',
                    tooltip: 'Previous view', 
                    handler: nav.previous.trigger
                })
            );
            
            toolbar.add(
                new Ext.Toolbar.Button({
                    iconCls: 'next',
                    tooltip: 'Next view', 
                    handler: nav.next.trigger
                })
            );
            
            addSeparator(toolbar);
            
            toolbar.activate();
        }
      // END TOOLBAR
 

  function hideDetails(obj) {
      var feature = obj.feature;
      feature.layer.drawFeature(feature);
      
      var infoPanel = Ext.getCmp('south-panel');
      infoPanel.body.dom.innerHTML = '';
  }
 

</script>
</html>
